<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小米商城——小米6s</title>
		<!--此处引入样式表，选定CSS来源-->
		<link rel="stylesheet" href="css/MI_page.css" />
	</head>

	<body>
		<div id="header">
			<img src="img/cms_14962361654122_bWEdq.jpg" style="width: 100%;" />
			<div id="headermain">
				<ul class="fl">
					<li>
						<a href="小米主页面.html">小米商城</a><span>|</span></li>
					<li>
						<a href="javascript:;">MUI</a><span>|</span></li>
					<li>
						<a href="javascript:;">米聊</a><span>|</span></li>
					<li>
						<a href="javascript:;">游戏</a><span>|</span></li>
					<li>
						<a href="javascript:;">多看阅读</a><span>|</span></li>
					<li>
						<a href="javascript:;">云服务</a><span>|</span></li>
					<li>
						<a href="javascript:;">金融</a><span>|</span></li>
					<li>
						<a href="javascript:;">小米商城移动版</a><span>|</span></li>
					<li>
						<a href="javascript:;">问题反馈</a><span>|</span></li>
					<li>
						<a href="javascript:;">Select Region</a>
					</li>
				</ul>

				<ul class="fr">
					<li>
						<a href="logon.html">登录</a><span>|</span></li>
					<li>
						<a href="register.html">注册</a><span>|</span></li>
					<li style="padding-right: 25px;">
						<a href="javascript:;">消息通知</a>
					</li>
					<li class="lispecial">
						<a href="car.html">购物车（0）</a>
						<div class="lihover">
							购物车中还没有商品，赶紧选购吧！
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div style="clear: both;"></div>
		<div id="main">
			<div id="nav">

				<div class="logo fl">
					<img src="img/milogo1.png" title="小米商城" />
					<img src="img/logo auto.gif" id="mlogo" align="top" />
				</div>
				<ul class="fl">
					<li>
						<a href="javascript:;">小米手机
							<div class="headlist">
								<img src="img/20170606212738.png" />
							</div>
						</a>
					</li>
					<li>
						<a href="javascript:;">红米
							<div class="headlist">
								<img src="img/20170606212753.png" />
							</div>
						</a>
					</li>
					<li>
						<a href="MI-subnotebook.html">平板 . 笔记本
							<div class="headlist">
								<img src="img/20170606212807.png" />
							</div>
						</a>
					</li>
					<li>
						<a href="javascript:;">电视
							<div class="headlist">
								<img src="img/20170606212821.png" />
							</div>
						</a>
					</li>
					<li>
						<a href="javascript:;">盒子 .影音
							<div class="headlist">
								<img src="img/20170606212838.png" />
							</div>
						</a>
					</li>
					<li>
						<a href="javascript:;">路由器
							<div class="headlist">
								<img src="img/20170606212838.png" />
							</div>
						</a>
					</li>
					<li>
						<!--<a href="javascript:;">智能硬件-->
						
						<a href=" Remote control.html">智能硬件
							<div class="headlist">
								<img src="img/20170606212738.png" />
							</div>
						</a>
					</li>
					<li>
						<a href="javascript:;">服务

						</a>
					</li>
					<li>
						<a href="javascript:;">社区</a>
					</li>
				</ul>
				<div class="search fr">
					<input type="text" name="" id="" value="" class="searchtxt" placeholder="小米降噪耳机    小米Max2" />
					<input type="button" name="" id="" value="" class="searchbtn" />
				</div>
				<div class="searchtext">
					<ul>
						<li></li>
					</ul>
				</div>
				<!--清除浮动，方便布局-->
			</div>
			<div style="clear: both;"></div>
			<div id="home">
				<div class="leftnav">
					<ul>
						<li>
							<a href="javascript:;">手机</a>
							<a href="javascript:;">电话卡</a><span><strong  >></strong></span>
							<div class="subleftnav1 subleftnav">
								<img src="img/m6.png">
							</div>
						</li>
						<li>
							<a href="javascript:;">笔记本</a>
							<a href="javascript:;">平板</a><span><strong >></strong></span>
							<div class="subleftnav2 subleftnav">
								<img src="img/2.png" />
							</div>
						</li>
						<li>
							<a href="javascript:;">电视</a>
							<a href="javascript:;">盒子</a><span><strong>></strong></span>
							<div class="subleftnav3 subleftnav">
								<img src="img/md.png" />

							</div>
						</li>
						<li>
							<a href="javascript:;">路由器</a>
							<a href="javascript:;">智能硬件</a><span><strong>></strong></span>
							<div class="subleftnav4 subleftnav">
								<img src="img/ml.png" />
							</div>
						</li>
						<li>
							<a href="javascript:;">移动电源</a>
							<a href="javascript:;">电池</a>
							<a href="javascript:;">插线板</a><span><strong>></strong></span>
							<div class="subleftnav5 subleftnav">
								<img src="img/my.png" />

							</div>
						</li>
						<li>
							<a href="javascript:;">耳机</a>
							<a href="javascript:;">音箱</a><span><strong>></strong></span>
							<div class="subleftnav6 subleftnav">
								<img src="img/tb.png" />

							</div>
						</li>
						<li>
							<a href="javascript:;">保护套</a>
							<a href="javascript:;">贴膜</a><span><strong>></strong></span>
							<div class="subleftnav7 subleftnav">
								<img src="img/tm.png" />
							</div>
						</li>
						<li>
							<a href="javascript:;">线材</a>
							<a href="javascript:;">支架</a>
							<a href="javascript:;">存储卡</a><span><strong>></strong></span>
							<div class="subleftnav8 subleftnav">
								<img src="img/xc.png" />
							</div>
						</li>
						<li>
							<a href="javascript:;">箱包</a>
							<a href="javascript:;">服饰</a>
							<a href="javascript:;">鞋</a>
							<a href="javascript:;">眼镜</a><span><strong>></strong></span>
							<div class="subleftnav9 subleftnav">
								<img src="img/xb.png" />
							</div>
						</li>
						<li>
							<a href="javascript:;">米兔</a>
							<a href="javascript:;">生活周边</a><span><strong>></strong></span>
							<div class="subleftnav10 subleftnav">
								<img src="img/mt.png" />
							</div>
						</li>
					</ul>
				</div>
				<div class="home-slider">
					<a target="_blank" href="http://www.baidu.com">
						<img id="sliderImg" src="" />
					</a>
					<div class="home-direction">
						<a class="ui-prev" href="javascript:;"></a>
						<!--href="javascript:;"没有链接跳转-->
						<a class="ui-next" href="javascript:;"></a>
					</div>

				</div>
			</div>
			<div style="clear: both;"></div>
			<div class="smallpic">
				<ul>
					<li class="specalpic"><img src="img/middle1.png" /></li>
					<li>
						<a href="javascript:;"><img src="img/middle2.png" width="315px" /></a>
					</li>
					<li>
						<a href="javascript:;"><img src="img/middle3.png" width="315px" /></a>
					</li>
					<li style="margin-right: 0px;">
						<a href="javascript:;"><img src="img/middle4.png" width="315px" /></a>
					</li>
				</ul>
			</div>
			<!-- 需要动态创建列表 -->
			<div class="startitle">
				小米明星单品
				<div class="irons" style="display: inline-block; position: relative;
				left: 990px; top:10px;">
					<img src="img/last.png" style="margin-right: -7px;" id="last">
					<img src="img/next.png" style="position: relative;top: 1px;" id="next" />
				</div>
			</div>
			<div class="starpic">
				<ul id="starpic_ul">
					<!-- 1 -->
					<li style="border-top: 1px solid javascript:;FFAC13;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米5.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米5 64GB</a>
						</p>
						<p class="fenqi">四轴防抖相机，能刷公交卡、银行卡</p>
						<p class="red">1799元</p>
					</li>
					<li style="border-top: 1px solid javascript:;83C44E;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米5s plus.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米5s plus</a>
						</p>
						<p class="fenqi">骁龙821旗舰处理器，轻薄金属机身</p>
						<p class="red">2799元起</p>
					</li>
					<li style="border-top: 1px solid javascript:;2196F3;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米5s.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米手机5s </a>
						</p>
						<p class="fenqi">骁龙821处理器，超声波指纹识别</p>
						<p class="red">1999元起</p>
					</li>
					<li style="border-top: 1px solid javascript:;E53935;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米电视.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米电视4A 43英寸</a>
						</p>
						<p class="fenqi">5月10日-14日享3期分期免息</p>
						<p class="red">2099元起</p>
					</li>
					<li style="border-top:1px solid javascript:;00C0A5 ;" class="starpic_li">
						<a href="javascript:;"><img src="img/米家菲利普.png" width="160px" /></a>
						<p>
							<a href="javascript:;">米家菲利普智睿台灯二代</a>
						</p>
						<p class="fenqi">感知环境光，主动优化场景照明</p>
						<p class="red">199元</p>
					</li>
					<!-- 2 -->
					<li style="border-top: 1px solid javascript:;FFAC13;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米5.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米5 64GB</a>
						</p>
						<p class="fenqi">四轴防抖相机，能刷公交卡、银行卡</p>
						<p class="red">1799元</p>
					</li>
					<li style="border-top: 1px solid javascript:;83C44E;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米5s plus.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米5s plus</a>
						</p>
						<p class="fenqi">骁龙821旗舰处理器，轻薄金属机身</p>
						<p class="red">2799元起</p>
					</li>
					<li style="border-top: 1px solid javascript:;2196F3;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米5s.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米手机5s </a>
						</p>
						<p class="fenqi">骁龙821处理器，超声波指纹识别</p>
						<p class="red">1999元起</p>
					</li>
					<li style="border-top: 1px solid javascript:;E53935;" class="starpic_li">
						<a href="javascript:;"><img src="img/小米电视.png" width="160px" /></a>
						<p>
							<a href="javascript:;">小米电视4A 43英寸</a>
						</p>
						<p class="fenqi">5月10日-14日享3期分期免息</p>
						<p class="red">2099元起</p>
					</li>
					<li style="border-top:1px solid javascript:;00C0A5 ;" class="starpic_li">
						<a href="javascript:;"><img src="img/米家菲利普.png" width="160px" /></a>
						<p>
							<a href="javascript:;">米家菲利普智睿台灯二代</a>
						</p>
						<p class="fenqi">感知环境光，主动优化场景照明</p>
						<p class="red">199元</p>
					</li>

				</ul>
			</div>
		</div>
		<div style="clear: both;"></div>
		<div id="main-list">

			<div id="mainlist">
				<div class="main-font">
					家电
					<ul class="bianlan">
						<li>热门</li>
						<li>影视</li>
						<li>家电</li>
						<li>&gt;&gt;</li>
					</ul>
				</div>
				<div class="main-leftlist fl">
					<a href="javascript:;">
						<img src="img/家电/xmad_14950222431232_Twnyl.jpg" width="235px" /></a>
				</div>
				<div class="main-rightlist fl">
					<ul class="homeelect">
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/家电/pms_1465366178.11466342!220x220.jpg" width="160px" />
								<p class="title">米家恒温电水壶</p>
								<p class="desc">水温智能控制，304 不锈钢内胆</p>
								<p class="price">199元</p>
								<!-- <div></div> -->
							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/家电/pms_1478678718.61531371!220x220.jpg" width="160px" />
								<p class="title"> 米家IH电饭煲 4L</p>
								<p class="desc">电磁环绕加热，3000+ 煮米方案</p>
								<p class="price">599元</p>
							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;"><img src="img/家电/pms_1477916442.08799062!220x220.jpg" width="160px" />
								<p class="title"> 米家空气净化器Pro</p>
								<p class="desc">OLED显示屏幕，激光颗粒物传感器</p>
								<p class="price">1499元</p>
							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/家电/pms_1490756071.3088664!220x220.png" width="160px" />
								<p class="title"> 小米净水器（厨上式）</p>
								<p class="desc">RO反渗透直出纯净水，健康家庭必备</p>
								<p class="price">1299元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/家电/pms_1490770630.65576964!220x220.png" width="160px" />
								<p class="title"> 米家IH电饭煲 3L</p>
								<p class="desc">电磁环绕加热，3000+ 煮米方案</p>
								<p class="price">399元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/家电/pms_1495181529.76425098!220x220.jpg" width="160px" />
								<p class="title"> 飞利浦智睿吸顶灯</p>
								<p class="desc">色温亮度可调，多重智能控制</p>
								<p class="price">349元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/家电/T1zLL_Bbxv1RXrhCrK!220x220.jpg" width="160px" />
								<p class="title"> Yeelight LED 吸顶灯</p>
								<p class="desc">5分钟快装，月光夜灯，IP60 级防尘</p>
								<p class="price">379元</p>
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 40px;background:white ">
							<a href="javascript:;">
								<img src="img/家电/jd1.png" />
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 0px;background:white ">
							<a href="javascript:;">
								<img src="img/家电/jd2.png" />
							</a>
						</li>

					</ul>
				</div>
				<div style="clear: both;"></div>
				<div class="main-font">
					智能
					<ul class="bianlan">
						<li>热门</li>
						<li>影视</li>
						<li>家电</li>
						<li>&gt;&gt;</li>
					</ul>
				</div>
				<div class="main-leftlist fl">
					<a href="javascript:;">
						<img src="img/智能/xmad_14963109807062_ewOvH.jpg" width="235px" style="margin-bottom: 8px;" />
						<img src="img/智能/xmad_14950996440442_FrUIx.jpg" width="235px" />
					</a>
				</div>
				<div class="main-rightlist fl">
					<ul class="homeelect">
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/智能/pms_1467962689.97551741!220x220.jpg" width="160px" />
								<p class="title"> 小米手环2</p>
								<p class="desc">OLED 显示屏幕，升级计步算法</p>
								<p class="price">149元</p>

							</a>
						</li>
						<li>
							<a href="MI-Family packages.html"><img src="img/智能/xmad_14927605434196_fmGSl.png" width="160px" />
								<p class="title"> 米家智能家庭礼品装</p>
								<p class="desc">智能联动，让生活更便捷</p>
								<p class="price">329元</p>

							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;"><img src="img/智能/pms_1478076543.58248227!220x220.jpg" width="160px" />
								<p class="title"> 米兔积木机器人</p>
								<p class="desc">978个零件，享受挑战双手的乐趣</p>
								<p class="price">499元</p>
							</a>

						</li>
						<li>
							<a href="javascript:;"><img src="img/智能/pms_1487824962.01314237!220x220.jpg" width="160px" />
								<p class="title"> 小米无人机 4K 版</p>
								<p class="desc">探索触手可及的新视角</p>
								<p class="price">2999元</p>
							</a>

						</li>

						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/智能/pms_1487831386.1667404!220x220.jpg" width="160px" />
								<p class="title">小米体脂秤</p>
								<p class="desc">简约纤薄，隐藏式 LED 显示屏</p>
								<p class="price">199元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/智能/pms_1488272686.62666302!220x220.jpg" width="160px" />
								<p class="title"> 小米米家电动滑板车</p>
								<p class="desc">极简几何设计，1 分钟轻松上手</p>
								<p class="price">1999元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/智能/pms_1494490988.2099047!220x220.jpg" width="160px" />
								<p class="title"> 米家智能摄像机云台版</p>
								<p class="desc">360° 视角，720P分辨率，红外夜视</p>
								<p class="price">199元</p>
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 40px;background:white ">
							<a href="javascript:;">
								<img src="img/智能/zn1.png" />
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 0px;background:white ">
							<a href="javascript:;">
								<img src="img/智能/zn2.png" />
							</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"></div>
				<div class="main-font">
					搭配
					<ul class="bianlan">
						<li>热门</li>
						<li>影视</li>
						<li>家电</li>
						<li>&gt;&gt;</li>
					</ul>
				</div>
				<div class="main-leftlist fl">
					<a href="javascript:;">
						<img src="img/搭配/xmad_14917442265775_pIcEt.jpg" width="235px" style="margin-bottom: 8px;" />
						<img src="img/搭配/xmad_14943869328129_ZTzIW.jpg" width="235px" />
					</a>
				</div>
				<div class="main-rightlist fl">
					<ul class="homeelect">
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/搭配/pms_1476674302.67179007.jpg" width="160px" />
								<p class="title"> 小米运动蓝牙耳机 </p>
								<p class="price">149元</p>
								<p class="desc">7841人评价</p>

							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/搭配/pms_1482321199.12589253.jpg" width="160px" />
								<p class="title"> 小米圈铁耳机Pro </p>

								<p class="price">149元</p>
								<p class="desc">1.7万人评价</p>

							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;"><img src="img/搭配/pms_1478248721.42297795.jpg" width="160px" />
								<p class="title"> 小米蓝牙耳机青春版 </p>

								<p class="price">59元</p>
								<p class="desc">2.3万人评价</p>

							</a>

						</li>
						<li>
							<a href="javascript:;"><img src="img/搭配/T142A_BXEv1RXrhCrK!220x220.jpg" width="160px" />
								<p class="title"> ROIDMI音乐蓝牙车充</p>

								<p class="price">99元</p>
							</a>

						</li>

						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/搭配/T1xxVTBghv1RXrhCrK!220x220.jpg" width="160px" />
								<p class="title">彩虹5号电池（10粒装）</p>

								<p class="price">9.9元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/搭配/pms_1484034162.02747540!220x220.jpg" width="160px" />
								<p class="title"> 小米USB充电器（2口）</p>

								<p class="price">49元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/搭配/pms_1478510064.36397738.jpg" width="160px" />
								<p class="title"> 小米车载充电器</p>

								<p class="price">49元</p>
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 40px;background:white ">
							<a href="javascript:;">
								<img src="img/智能/zn1.png" />
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 0px;background:white ">
							<a href="javascript:;">
								<img src="img/智能/zn2.png" />
							</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"></div>
				<div class="main-font">
					配件
					<ul class="bianlan">
						<li>热门</li>
						<li>影视</li>
						<li>家电</li>
						<li>&gt;&gt;</li>
					</ul>
				</div>
				<div class="main-leftlist fl">
					<a href="javascript:;">
						<img src="img/配件/xmad_14955223986783_XngQB.jpg" width="235px" style="margin-bottom: 8px;" />
						<img src="img/配件/xmad_14951679051921_JWQpV.jpg" width="235px" />
					</a>
				</div>
				<div class="main-rightlist fl">
					<ul class="homeelect">
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/配件/pms_1487742227.27595029!220x220.jpg" width="160px" />
								<p class="title"> 红米Note 4X 标准高透贴膜 </p>
								<p class="price">19元</p>
							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/配件/T1SSJ_B4E_1RXrhCrK!220x220.jpg" width="160px" />
								<p class="title"> 小米平板2 标准高透贴膜</p>
								<p class="price">29元</p>
							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;"><img src="img/配件/pms_1469787992.44385373!220x220.jpg" width="160px" />
								<p class="title"> 小米手机5 钢化玻璃贴膜</p>
								<p class="price">29元</p>
							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/配件/pms_1482136277.01722149!220x220.jpg" width="160px" />
								<p class="title"> 小米5s Plus 标准高透贴膜</p>

								<p class="price">19元</p>
							</a>
						</li>

						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/配件/pms_1488522399.17728020.jpg" width="160px" />
								<p class="title"> 小米5s 标准高透贴膜</p>

								<p class="price">19元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/配件/T1y7JQBbCT1RXrhCrK!220x220.jpg" width="160px" />
								<p class="title"> 红米4高配版 标准高透贴膜</p>

								<p class="price">19元</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/配件/pms_1482136306.7944683!220x220.jpg" width="160px" />
								<p class="title"> 小米Max 标准高透贴膜</p>

								<p class="price">19元</p>
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 40px;background:white ">
							<a href="javascript:;">
								<img src="img/配件/pj1.png" />
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 0px;background:white ">
							<a href="javascript:;">
								<img src="img/配件/pj2.png" />
							</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"></div>
				<div class="main-font">
					周边
					<ul class="bianlan">
						<li>热门</li>
						<li>影视</li>
						<li>家电</li>
						<li>&gt;&gt;</li>
					</ul>
				</div>
				<div class="main-leftlist fl">
					<a href="javascript:;">
						<img src="img/周边/xmad_1493109150882_opGFm.jpg" width="235px" style="margin-bottom: 8px;" />
						<img src="img/周边/xmad_14956877350205_shdyG.jpg" width="235px" />
					</a>
				</div>
				<div class="main-rightlist fl">
					<ul class="homeelect">
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/周边/pms_1489482473.58444489!220x220.jpg" width="160px" />
								<p class="title">米兔图案圆领短袖T恤 男款</p>
								<p class="price">69元</p>
								<p class="desc">1164人评价</p>

							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/周边/pms_1489482572.28451512!220x220.jpg" width="160px" />
								<p class="title"> MI LOGO图案圆领短袖T恤 男款</p>
								<p class="price">69元</p>
								<p class="desc">913人评价</p>

							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;"><img src="img/周边/pms_1489482713.59884063!220x220.jpg" width="160px" />
								<p class="title"> 小米功能短袖Polo衫 男款</p>
								<p class="price">99元</p>
								<p class="desc">1323人评价</p>

							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/周边/pms_1489482769.0537587!220x220.jpg" width="160px" />
								<p class="title"> 小米V领短袖T恤 男款</p>

								<p class="price">99元</p>
								<p class="desc">2119人评价</p>

							</a>
						</li>

						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/周边/pms_1490079731.77948210!220x220.png" width="160px" />
								<p class="title"> 小米短袖T恤 科技艺术</p>
								<p class="price">99元</p>
								<p class="desc">418人评价</p>
							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/周边/pms_1490698921.90768471!220x220.png" width="160px" />
								<p class="title"> MIX图案圆领短袖T恤 男款</p>

								<p class="price">69元</p>
								<p class="desc">537人评价</p>

							</a>
						</li>
						<li style="margin-bottom: 0px;background:white ">
							<a href="javascript:;"><img src="img/周边/pms_1490699313.83423551!220x220.png" width="160px" />
								<p class="title"> 小米运动功能圆领短袖T恤 男款</p>
								<p class="price">69元</p>
								<p class="desc">459人评价</p>

							</a>
						</li>

						<li class="productlast1" style="margin-bottom: 40px;background:white ">
							<a href="javascript:;">
								<img src="img/周边/zb1.png" />
							</a>
						</li>
						<li class="productlast1" style="margin-bottom: 0px;background:white ">
							<a href="javascript:;">
								<img src="img/周边/zb2.png" />
							</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"></div>

				<div style="clear: both;"></div>
				<div class="main-font">
					为你推荐
				</div>

				<div class="main-rightlist fl" style="width: 1330px;">
					<ul class="homeelect">

						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/为你推荐/pms_1476674302.67179007.jpg" width="160px" />
								<p class="title">米兔图案圆领短袖T恤 男款</p>
								<p class="price">69元</p>
								<p class="desc">1164人评价</p>

							</a>
						</li>

						<li>
							<a href="javascript:;">
								<img src="img/为你推荐/pms_1476688193.46995320.jpg" width="160px" />
								<p class="title"> Amazfit 运动手表 </p>
								<p class="price">799元</p>
								<p class="desc"> 4648人好评 </p>

							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;"><img src="img/为你推荐/pms_1477389928.07792706.jpg" width="160px" />
								<p class="title"> 小米米家电动滑板车 </p>
								<p class="price">1999元</p>
								<p class="desc"> 1834人好评 </p>

							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/为你推荐/pms_1481507050.2285518.jpg" width="160px" />
								<p class="title"> 小米运动蓝牙耳机 </p>

								<p class="price">149元</p>
								<p class="desc"> 7846人好评 </p>

							</a>
						</li>
						<li>
							<a href="javascript:;"><img src="img/为你推荐/pms_1475052168.43877575.jpg" width="160px" />
								<p class="title"> 小米运动蓝牙耳机 </p>

								<p class="price">149元</p>
								<p class="desc"> 7846人好评 </p>

							</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"></div>
				<div class="main-font" style="margin-left: 15px;">
					热评产品
				</div>
				<div class="productlist">
					<ul>
						<li style="background:white  margin-left:0px;">
							<a href="javascript:;">
								<img src="img/host production/20170604221333.png" />
							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/host production/20170604221552.png" />
							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/host production/20170604221608.png" />
							</a>
						</li>
						<li style="background:white ">
							<a href="javascript:;">
								<img src="img/host production/20170604221619.png" />
							</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"></div>
				<div class="main-font" style="margin-left: 15px;color: javascript:;424242;">
					内容
				</div>
				<div class="neirong">
					<ul>
						<li style="background:white  margin-left:0px;">
							<a href="javascript:;">
								<img src="img/内容/20170604223558.png" />
							</a>
						</li>
						<li style="background:white  ">
							<a href="javascript:;">
								<img src="img/内容/20170604223626.png" />
							</a>
						</li>
						<li style="background:white  ">
							<a href="javascript:;">
								<img src="img/内容/20170604223641.png" />
							</a>
						</li>
						<li style="background:white  ">
							<a href="javascript:;">
								<img src="img/内容/20170604223650.png" />
							</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"></div>

				<div class="main-font" style="margin-left: 15px;color: javascript:;424242;">
					视频
				</div>
				<div class="shiping">
					<ul>
						<li style=" margin-left:0px;">
							<a href="javascript:;">
								<img src="img/视频图片/xmad_1492588199164_Jykpx.jpg" />
								<p class="title" style="margin-top: 30px;"> 听雷总讲述小米7年工艺探索之路 </p>
								<p class="desc" style="margin-top: 10px;"> 小米6，7年工艺探索的巅峰之作 </p>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/视频图片/xmad_14925882923733_lghaJ.jpg" />
								<p class="title" style="margin-top: 30px;"> 小米6外观设计视频</p>
								<p class="desc" style="margin-top: 10px;"> 震惊！小米6竟然如此之美 </p>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/视频图片/xmad_14954491368955_oHlMm.jpg" />
								<p class="title" style="margin-top: 30px;"> 小米电视4 外观设计视频</p>
								<p class="desc" style="margin-top: 10px;"> 小米6，7年工艺探索的巅峰之作 </p>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/视频图片/xmad_14925882923733_lghaJ.jpg" />
								<p class="title" style="margin-top: 30px;"> 小米6外观设计视频</p>
								<p class="desc" style="margin-top: 10px;"> 震惊！小米6竟然如此之美 </p>
							</a>
						</li>
					</ul>
				</div>

			</div>

		</div>
		<div style="clear: both;"></div>
		<div id="footer">
			<div class="footer_1">
				<ul>
					<li class="li1">
						<a href="javascript:;">预约维修服务</a>
					</li>
					<li class="li2">
						<a href="javascript:;">7天无理由退货</a>
					</li>
					<li class="li3">
						<a href="javascript:;">15天免费换货</a>
					</li>
					<li class="li4">
						<a href="javascript:;">满150元包邮</a>
					</li>
					<li class="li5">
						<a href="javascript:;">520余家售后网点</a>
					</li>
				</ul>
			</div>
			<div class="footer_2">
				<dl>
					<dt><a href="javascript:;">帮助中心</a></dt>
					<dd>
						<a href="javascript:;">账户管理</a>
					</dd>
					<dd>
						<a href="javascript:;">购物指南</a>
					</dd>
					<dd>
						<a href="javascript:;">订单操作</a>
					</dd>
				</dl>
				<dl>

					<dt><a href="javascript:;">服务支持</a></dt>
					<dd>
						<a href="javascript:;">售后政策</a>
					</dd>
					<dd>
						<a href="javascript:;">自助服务</a>
					</dd>
					<dd>
						<a href="javascript:;">相关下载</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">线下门店</a></dt>
					<dd>
						<a href="javascript:;">小米之家</a>
					</dd>
					<dd>
						<a href="javascript:;">服务网点</a>
					</dd>
					<dd>
						<a href="javascript:;">零售网点</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">关于小米</a></dt>
					<dd>
						<a href="javascript:;">了解小米</a>
					</dd>
					<dd>
						<a href="javascript:;">加入小米</a>
					</dd>
					<dd>
						<a href="javascript:;">联系我们</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">关注我们</a></dt>
					<dd>
						<a href="javascript:;">新浪微博</a>
					</dd>
					<dd>
						<a href="javascript:;">小米部落</a>
					</dd>
					<dd>
						<a href="javascript:;">官方微博</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">特色服务</a></dt>
					<dd>
						<a href="javascript:;">F码通道</a>
					</dd>
					<dd>
						<a href="javascript:;">礼物码</a>
					</dd>
					<dd>
						<a href="javascript:;">防伪查询</a>
					</dd>
				</dl>
				<div class="phone fr">
					<p class="number">400-100-5678</p>
					<p>周一至周日 8:00-18:00</p>
					<p>（仅收市话费）</p>
					<p class="hourpic"></p>
				</div>
			</div>
		</div>
					<div style="clear: both;"></div>
		<div class="bg">
			<div class="footer_3 ">
				<div class="fl">
					<img src="img/logo-footer.png" align="center" /></div>

				<div class="fl footer_4">
					<ul>
						<li>
							<a href="javascript:;">小米商城</a>|</li>
						<li>
							<a href="javascript:;">MIUI</a>|</li>
						<li>
							<a href="javascript:;">米聊</a>|</li>
						<li>
							<a href="javascript:;">多看书城</a>|</li>
						<li>
							<a href="javascript:;">小米路由器</a>|</li>
						<li>
							<a href="javascript:;">视频电话</a>|</li>
						<li>
							<a href="javascript:;">小米淘宝直营店</a>|</li>
						<li>
							<a href="javascript:;">小米网盟</a>|</li>
						<li>
							<a href="javascript:;">小米移动</a>|</li>
						<li>
							<a href="javascript:;">隐私政策</a>|</li>
						<li>
							<a href="javascript:;">Select Region</a>|</li>
					</ul>
					<div style="clear: both;"></div>
					<p>
						<a href="javascript:;">&copy;mi.com</a>
						<a href="javascript:;">京ICP证110507号</a>
						<a href="javascript:;">京ICP备10046444号</a>
						<a href="javascript:;">京公网安备11010802020134号</a>
						<a href="javascript:;">京网文[2014]0059-0009号</a>
					</p>
					<p>违法和不良举报信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验测试</p>
				</div>
				<div class="fr">
					<img src="img/footer/truste.png" width="85px" />
					<img src="img/footer/v-logo-2.png" />
					<img src="img/footer/v-logo-1.png" />
					<img src="img/footer/v-logo-3.png" />
				</div>
				<div style=" clear: both;"></div>
			</div>
			<footer>探索小米黑科技，为小米发烧而生</footer>

		</div>
		<script type="text/javascript">
			//应用了匿名函数，数组，query
			(function() {
				//				创建一个数组放图片
				var sliderArr = [
					/*"img/轮播图/xmad_15023605898733_HhXTA.jpg",*/
					"img/轮播图/xmad_14958767199461_BGeFZ1226  460.jpg",
					"img/轮播图/xmad_14958835805205_wWoyE.jpg",
					"img/轮播图/xmad_14962268945869_klEsv.jpg",
					"img/轮播图/xmad_14963104292089_oasMZ.jpg",
					"img/轮播图/xmad_15003455273549_AYLIz.jpg"
				];

				//			querySelectorAll这个方法不能随便用,必须返回是个集合不然没效果
				var homeSlider = document.querySelector(".home-slider");
				var div = document.createElement("div");
				var ul = document.createElement("ul");
				var index = 0;
				var prev = document.querySelector(".ui-prev");
				var next = document.querySelector(".ui-next");
				var sliderImg = document.getElementById("sliderImg");
				//			默认情况下路径为数组图片的第一个
				sliderImg.src = sliderArr[0];

				//          为动态添加的div设置类名
				div.className = "ui-pager";
				homeSlider.appendChild(div);
				div.appendChild(ul);
				//			数组的长度就是添加li的个数
				for(var i = 0; i < sliderArr.length; i++) {
					var li = document.createElement("li");
					li.setAttribute("index", i);
					if(i == 0) {
						li.classname = "active";
					}
					li.addEventListener("click", function() {
						sliderImg.src = sliderArr[this.getAttribute("index")];
						liAction(this.getAttribute("index"));

					});
					ul.appendChild(li);
				}
				//				图片轮播循环没问题
				prev.addEventListener("click", function() {
					//					单机上一步时的功能实现
					index--;
					if(index < 0) {
						index = sliderArr.length - 1;
						//						数组里的最大数减一
					}
					sliderImg.src = sliderArr[index];
					liAction(index);

				});
				next.addEventListener("click", function() {
					index++;
					if(index >= sliderArr.length) {
						index = 0;
					}
					sliderImg.src = sliderArr[index];
					liAction(index);
				});

				li.addEventListener("click", function() {
					sliderImg.src = sliderArr[this.getAttribute("index")];
					//						取消之前的点
					var lilist = document.querySelectorAll(".ui-pager li");
					for(var i = 0; i < lilist.length; i++) {
						lilist[i].removeAttribute("class");
					}
					this.className = "active";
				});
				//					每隔多少秒显示执行一次
				setInterval(function() {
					next.click();
				}, 5000);

				function liAction(index) {
					var lilist = document.querySelectorAll(".ui-pager li");
					for(var i = 0; i < lilist.length; i++) {
						lilist[i].removeAttribute("class");
					}
					lilist[index].className = "active";
				}

			})();
			// if (Px>-1230;) {} else {}

			/*获取id——last并且加入点击事件；
		缓存变量ul、px（ul.offsetleft）,
		加入前移动的定时器的效果setinterval(function(){},100)*/
			document.getElementById("last").onclick = function() {
				var oUl = document.querySelector("#starpic_ul");
				var Px = parseInt(oUl.offsetLeft);
				if(Px == 0) {
					var lastMove = setInterval(function() {

						Px = Px - 10;
						oUl.style.left = Px + "px";
						console.log(Px);
						if(Px == -1230) {
							clearInterval(lastMove);
						}

					}, 1);
				} else {
					oUl.style.left = Px + "px";
				}

			}
			document.querySelector("#next").onclick = function() {
				var oUl = document.querySelector("#starpic_ul");
				var Px = parseInt(oUl.offsetLeft);
				if(Px == -1230) {
					var nextMove = setInterval(function() {
						Px = Px + 10;
						oUl.style.left = Px + "px";
						console.log(Px);
						if(Px == 0) {
							clearInterval(nextMove);
						}
					}, 1);
				} else {
					oUl.style.left = Px + "px";
				}
			}
	      var borders=document.querySelectorAll(".starpic_li");
	      /*var r =Math.random()*255;
	      var g=Math.random()*255;
	      var b =Math.random()*255;*/
	     console.log(borders.length);
	      for (var i = 0; i < borders.length; i++) {
	      	var r =parseInt(Math.random()*255) ;
	     	var g=parseInt(Math.random()*255);
	     	var b =parseInt(Math.random()*255);
//	     	console.log(r);
	      	borders[i].style.borderTop = "1px solid red ";
	      }
		</script>

	</body>

</html>